<!DOCTYPE HTML>
<html>
  <head>
    <title>Isometric Test</title>
    <style>
      .board {
        -webkit-transform:matrix(1,-0.6, 1,0.6, 0,0);
        -moz-transform:matrix(1,-0.6, 1,0.6, 0,0);
        -o-transform:matrix(1,-0.6, 1,0.6, 0,0);
        transform:matrix(1,-0.6, 1,0.6, 0,0);
        margin: auto;
        width: 350px;
        margin-top: 120px;
      }
 
      .tile {
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid #77B155;
      }
 
      .tile.odd {
        background: #8C5;
      }
 
      .tile.even {
        background: #7B5;
      }
    </style>
    <script>
      window.onload = function() {
        var board = document.createElement('div');
        board.className = 'board';
        document.body.appendChild(board);
 
        var odd = true;
 
        for (y = 0; y < 25; y++) {
          var row = document.createElement('div');
          row.className = 'row';
          board.appendChild(row);
 
          for (x = 0; x < 25; x++) {
            className = 'tile x' + x + ' y' + y + ' ';
            if (odd) {
              className += 'odd';
            } else {
              className += 'even';
            }
            odd = !odd;
 
            var tile = document.createElement('div');
            tile.className = className;
            row.appendChild(tile);
          }
        }
      };
    </script>
  </head>
  <body>
  </body>
</html>